<template>
  <div class="my-form">
    <div class="forms" :style="{ height: height }">
      <div class="left">
        <div class="title">获取专业营销解决方案</div>
        <div class="s-title">留下您的联系方式，我们的营销专业顾问为您服务</div>
        <div class="e-row">
          <div class="e-info">
            <img src="../../public/static/ren-icon@2x.png" alt />
            <el-input v-model="name" placeholder="姓名"></el-input>
          </div>
          <div class="e-info">
            <img src="../../public/static/iphone-icon@2x.png" alt />
            <el-input v-model="phone" maxlength="11" placeholder="手机"></el-input>
          </div>
        </div>
        <div class="e-row">
          <div class="e-info">
            <img src="../../public/static/gongsi-icon@2x.png" alt />
            <el-input v-model="company" placeholder="公司名称"></el-input>
          </div>
          <div class="e-info">
            <img src="../../public/static/email-icon@2x.png" alt />
            <el-input v-model="email" placeholder="邮箱"></el-input>
          </div>
        </div>
        <div class="e-row">
          <div class="e-info">
            <img src="../../public/static/gongwenb-icon@2x.png" alt />
            <el-select v-model="channel" placeholder="从那个渠道了解我们的">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="e-info">
            <img src="../../public/static/kefu-icon.@2x.png" alt />
            <el-select v-model="business" placeholder="咨询业务">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="l-row">
          <img src="../../public/static/beizhu-icon@2x.png" alt />
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请写明您的具体需求，以便我们安排相关顾问与您联系。"
            v-model="remark"
          ></el-input>
        </div>
        <div class="btn" @click="collection">预约营销专家</div>
      </div>
      <div class="right">
        <img src="../../public/static/kefulxbg@2x.png" alt />
        <div class="c-info">
          <div class="title">致电营销专业</div>
          <div class="g-time">工作时间 周一至周五 9:00-18:00</div>
          <div class="num">021-69172338</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "MyForm",
  props: {
    height: {
      type: String,
      default() {
        return "8.7rem";
      }
    }
  },
  components: {},
  data() {
    return {
      name: "",
      phone: "",
      company: "",
      email: "",
      channel: "",
      business: "",
      remark: "",
      options: [
        {
          value: "搜索引擎",
          label: "搜索引擎"
        },
        {
          value: "行业资讯",
          label: "行业资讯"
        },
        {
          value: "展会活动",
          label: "展会活动"
        },
        {
          value: "商务人员",
          label: "商务人员"
        },
        {
          value: "朋友推荐",
          label: "朋友推荐"
        },
        {
          value: "其他渠道",
          label: "其他渠道"
        }
      ],
      options1: [
        {
          value: "公关传播",
          label: "公关传播"
        },
        {
          value: "数字化营销",
          label: "数字化营销"
        },
        {
          value: "创意设计",
          label: "创意设计"
        },
        {
          value: "线下公关",
          label: "线下公关"
        },
        {
          value: "营销工具",
          label: "营销工具"
        }
      ]
    };
  },
  methods: {
    collection() {
      let flag = false;
      if (!this.phone && !this.email) {
        this.$Tips("请至少留下您的电话或者邮箱中的一个");
        return;
      }
      if (this.phone) {
        var TEL_REGEXP = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
        if (!TEL_REGEXP.test(this.phone)) {
          this.$Tips("请输入正确的手机号码");
          flag = true;
        }
      }
      if (this.email) {
        var TEL_REGEXP = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (!TEL_REGEXP.test(this.email)) {
          this.$Tips("请输入正确的邮箱");
          flag = true;
        }
      }
      if (flag) {
        return;
      }
      let params = {
        name: this.name,
        phone: this.phone,
        company: this.company,
        email: this.email,
        channel: this.channel,
        business: this.business,
        remark: this.remark
      };
      this.$post("/v1/order/collection", params).then(res => {
        if (res.code == 200) {
          this.$Tips("提交成功");
          this.name = "";
          this.phone = "";
          this.company = "";
          this.email = "";
          this.channel = "";
          this.business = "";
          this.remark = "";
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.my-form {
  background: #eff7fe;
  // padding-top: 0.1rem;
  .forms {
    width: 15.2rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left {
      flex: 1;
      margin-right: 0.36rem;
      text-align: center;
      position: relative;
      padding-top: 0.86rem;
      .title {
        font-size: 0.36rem;
      }
      .s-title {
        font-size: 0.18rem;
        margin-top: 0.18rem;
        margin-bottom: 0.72rem;
      }
      .e-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.25rem;
        .e-info {
          display: flex;
          align-items: center;
          width: 3.42rem;
          height: 0.6rem;
          background: #fff;
          padding: 0.1rem;
          box-sizing: border-box;
          img {
            width: 0.44rem;
            height: 0.44rem;
            vertical-align: middle;
          }
          input {
            display: inline-block;
            outline: none;
            border: none;
            height: 0.5rem;
          }
        }
        /deep/.el-input__inner {
          height: 0.6rem;
          line-height: 0.6rem;
          border: none !important;
          padding-right: 20px;
        }
        /deep/.el-input__icon {
          line-height: 0.36rem;
        }
        /deep/.el-input__suffix {
          right: -5px;
        }
      }
      .l-row {
        background: #fff;
        position: relative;
        img {
          position: absolute;
          top: 0px;
          left: 5px;
          width: 0.44rem;
          height: 0.44rem;
          vertical-align: middle;
          z-index: 33;
        }
        /deep/.el-textarea__inner {
          top: 0;
          border-color: #eee;
          // font-size: 0.1rem;
          height: 2.56rem;
          padding-left: 0.5rem;
          &::before {
            content: "111";
            background: url("../../public/static/kefu-icon.@2x.png");
            width: 0.34rem;
            height: 0.34rem;
          }
        }
      }
      .btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 0.25rem;
        background: #1a72e6;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        font-size: 0.2rem;
        color: #fff;
        cursor: pointer;
      }
    }
    .right {
      width: 7.78rem;
      height: 8.7rem;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .c-info {
        position: absolute;
        left: 0.5rem;
        bottom: 0.7rem;
        color: #fff;
        text-align: left;
        .title {
          font-size: 0.36rem;
        }
        .g-time {
          font-size: 0.24rem;
          margin: 0.26rem 0 0.3rem;
        }
        .num {
          font-size: 0.36rem;
        }
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  .my-form {
    height: auto;
    .forms {
      flex-wrap: wrap;
      width: 100%;
      height: auto !important;
      .left {
        width: 100vw;
        margin-right: 0;
        padding: 0.7rem 0.2rem 0.2rem;
        font-size: 0.16rem;
        input {
          font-size: 0.16rem;
        }
        textarea {
          font-size: 0.16rem;
        }
        .e-row {
          .e-info {
            height: 0.6rem;
            /deep/.el-input__inner {
              height: 0.58rem;
            }
          }
        }
        .l-row {
          /deep/.el-textarea__inner {
            // font-size: 0.28rem;
          }
        }
        .btn {
          height: 0.8rem;
          line-height: 0.8rem;
          font-size: 0.22rem;
        }
      }
      .right {
        width: 100vw;
      }
    }
  }
}
</style>
